<template>
  <simple-table
    :url-list="urlList"
    :current-use-btn-list="currentUseBtnList"
    :filed-property-list="filedPropertyList"
    :button-list="buttonList"
    submit-form-title="角色功能管理"
    @different-operation="differentOperation"
  ></simple-table>
  <menu-tree-dialog
    ref="menuTreeRef"
    :menu-visible="menuAuthorityVisible"
    v-model="menuAuthorityVisible"
    @close="changeMenuAuthorityVisible"
  >
  </menu-tree-dialog>
</template>

<script lang="ts" setup>
import SimpleTable from "@/components/table/simple/SimpleTable.vue";
import MenuTreeDialog from "@/components/dialog/menuTree/MenuTreeDialog.vue";
import { TableUrl } from "@/models/TableSetting";
import { BtnNameEnum } from "@/components/table/simple/BtnNameEnum";
import { MenuAuthorityVisible } from "@/components/table/simple/MenuAuthorityVisible";
import { ref } from "vue";
import Scope from "@/models/Scope";
import { RuleEnum } from "@/components/form/basic/FormEnum";

const urlList = {
  refreshUrl: "/basic-request/role/search",
  modifyingSingleUrl: "/basic-request/role",
  deleteUrl: "/basic-request/Role/batch-delete",
} as TableUrl;

// 当前页面使用的功能按钮
const currentUseBtnList: BtnNameEnum[] = [
  BtnNameEnum.ADD,
  BtnNameEnum.REFRESH,
  BtnNameEnum.DELETE,
  BtnNameEnum.BATCH_IMPORT,
];
const filedPropertyList = [
  {
    filedName: "name",
    label: "角色名称",
    span: 12,
    width: 200,
    minWidth: 120,
    showInTable: true,
    showInForm: true,
    formType: "el-form-text",
    rules: [
      {
        ruleName: RuleEnum.REQUIRED,
        ruleValue: true,
        message: "角色名称不能为空",
      },
    ],
  },
  {
    filedName: "introduction",
    label: "角色描述",
    span: 24,
    width: 220,
    minWidth: 220,
    showInTable: true,
    showInForm: true,
    formType: "el-form-area-text",
    rules: [
      {
        ruleName: RuleEnum.REQUIRED,
        ruleValue: true,
        message: "角色描述不能为空",
      },
    ],
  },
  {
    filedName: "createUser",
    label: "创建人",
    span: 8,
    width: 220,
    minWidth: 220,
    showInTable: true,
    showInForm: false,
    formType: "el-form-text",
  },
  {
    filedName: "createGmt",
    label: "创建时间",
    span: 8,
    minWidth: 220,
    showInTable: true,
    showInForm: false,
    formType: "el-form-picker-date",
  },
];
const buttonList = [
  {
    label: "访问权限",
    name: "access-authorization",
    icon: "compass",
    type: "text",
  },
  {
    label: "操作权限",
    name: "operate-authorization",
    icon: "set-up",
    type: "text",
  },
];

// 菜单权限表单的显示与隐藏
const { menuAuthorityVisible, changeMenuAuthorityVisible } =
  MenuAuthorityVisible();

const menuTreeRef = ref();
const differentOperation = (name: string, scope: Scope) => {
  switch (name) {
    case "access-authorization":
      menuTreeRef.value.getMenuTreeData(scope); // 查询当前点击角色的访问权限
      changeMenuAuthorityVisible();
      break;
    case "operate-authorization":
      menuTreeRef.value.getMenuBackendAPiTree(scope); // 查询当前角色访问具体页面的所有操作权限
      changeMenuAuthorityVisible();
      break;
  }
};
</script>

<style scoped></style>
